
  /* Button | DropDownButton | ComboButton | ToggleButton
 * 
 * Styling Buttons mainly includes:
 * 
 * 1. Containers
 * 		.dijitButton
 * 		.dijitDropDownButton
 * 		.dijitComboButton
 * 		.dijitButtonNode - common button/arrow wrapper shared across all three button types 
 
 * 2. Button text
 * 		.dijitButtonText
 * 
 * 3. Arrows - only for DropDownButton and ComboButton
 * 	     There are total four diredtions arrows - down, left, right, up:
 * 		.dijitArrowButtonInner - down arrow by default
 *      .dijitLeftArrowButton .dijitArrowButtonInner - left arrow
 *      .dijitRightArrowButton .dijitArrowButtonInner - right arrow
 *      .dijitUpArrowButton .dijitArrowButtonInner - up arrow
 * 
 * 4. States - Hover, Active, Disabled, e.g.
 * 		.dijitButtonHover .dijitButtonNode
 * 		.dijitButtonActive .dijitButtonNode
 * 		.dijitButtonDisabled .dijitButtonNode
 *      
 *      .dijitDisabled .dijitArrowButtonInner  - disabled arrow states 
 

*/
.claro .dijitButtonNode {
    
  /* rules for dijit.form.*Button widgets and arrow nodes on ComboBox, Spinner etc. 
	*/
-webkit-transition-property : background-color;
    -webkit-transition-duration : .3s;
}
.claro .dijitButton .dijitButtonNode, .claro .dijitDropDownButton .dijitButtonNode, .claro .dijitComboButton .dijitButtonNode, .claro .dijitToggleButton .dijitButtonNode {
    
  /* rules for the dijit.form.*Button widgets (see also ComboButton section below) 
	*/
border-color : #769dc0;
    border-style : solid;
    border-width : 1px;
    padding : 2px 4px 4px 4px;
    background-image : url("images/button.png");
    background-position : center top;
    background-repeat : repeat-x;
    background-color : #e4f2ff;
    border-radius : 4px;
    -moz-border-radius : 4px;
    -webkit-border-radius : 4px;
    box-shadow : 0px 1px 1px rgba(0,0,0,0.15);
    -webkit-box-shadow : 0px 1px 1px rgba(0,0,0,0.15);
    -moz-box-shadow : 0px 1px 1px rgba(0,0,0,0.15);
}
.claro .dijitComboButton .dijitArrowButton {
    border-left-width : 0px;
    padding : 4px 2px 4px 2px;/* TODO: still needed? 
*/

}

  /*arrow styles for down/up/left/right directions
*/
.claro .dijitArrowButtonInner {
    width : 15px;
    height : 15px;
    margin : 0 auto;
    background-image : url("images/buttonArrows.png");
    background-repeat : no-repeat;
    background-position : -51px 53%;
}
.claro .dijitLeftArrowButton .dijitArrowButtonInner {
    background-position : -77px 53%;
}
.claro .dijitRightArrowButton .dijitArrowButtonInner {
    background-position : -26px 53%;
}
.claro .dijitUpArrowButton .dijitArrowButtonInner {
    background-position : 0px 53%;
}
.claro .dijitDisabled .dijitArrowButtonInner {
    background-position : -151px 53%;
}
.claro .dijitDisabled .dijitLeftArrowButton .dijitArrowButtonInner {
    background-position : -177px 53%;
}
.claro .dijitDisabled .dijitRightArrowButton .dijitArrowButtonInner {
    background-position : -126px 53%;
}
.claro .dijitDisabled .dijitUpArrowButton .dijitArrowButtonInner {
    background-position : -100px 53%;
}
.claro .dijitButtonText {
    padding : 0 0.3em;
    text-align : center;
}
.claro .dijitDisabled .dijitButtonText {
    color : #7F7F7F;
}

  /* hover status 
*/
.claro .dijitButtonHover .dijitButtonNode, .claro .dijitDropDownButtonHover .dijitButtonNode, .claro .dijitComboButton .dijitButtonNodeHover, .claro .dijitComboButton .dijitDownArrowButtonHover, .claro .dijitToggleButtonHover .dijitButtonNode {
    background-color : #afd9ff;
    color : #000;
    -webkit-transition-duration : .2s;
}

  /* checked status 
*/
.claro .dijitButtonActive .dijitButtonNode, .claro .dijitDropDownButtonActive .dijitButtonNode, .claro .dijitComboButtonActive .dijitButtonNode, .claro .dijitToggleButtonActive .dijitButtonNode {
    background-color : #99cfff;
    box-shadow : 0px 0px 0px rgba(0,0,0,0);
    -webkit-box-shadow : 0px 0px 0px rgba(0,0,0,0);
    -moz-box-shadow : 0px 0px 0px rgba(0,0,0,0);
    -webkit-transition-duration : .1s;
}

  /* disabled status 
*/
.claro .dijitButtonDisabled, .claro .dijitDropDownButtonDisabled, .claro .dijitComboButtonDisabled, .claro .dijitToggleButtonDisabled {
    background-image : none;
    outline : none;
}
.claro .dijitButtonDisabled .dijitButtonNode, .claro .dijitDropDownButtonDisabled .dijitButtonNode, .claro .dijitComboButtonDisabled .dijitButtonNode, .claro .dijitToggleButtonDisabled .dijitButtonNode {
    background-position : 0px -149px;
    background-color : #e3e3e3;
    border : solid 1px #c9c9c9;
    color : #696969;
    box-shadow : 0px 0px 0px rgba(0,0,0,0);
    -webkit-box-shadow : 0px 0px 0px rgba(0,0,0,0);
    -moz-box-shadow : 0px 0px 0px rgba(0,0,0,0);
}
.claro .dijitComboButtonDisabled .dijitArrowButton {
    border-left-width : 0px;
}

  /* for ComboButton 
*/
.claro table.dijitComboButton {
    border-collapse : separate;/* override dijit.css so that ComboBox rounded corners work 
*/

}
.dj_ie6 .claro .dijitButtonNode {
    background-image : none;
}
.claro .dijitComboButton .dijitStretch {
    -moz-border-radius : 4px 0px 0px 4px;
    -webkit-border-top-left-radius : 4px;
    -webkit-border-top-right-radius : 0px;
    -webkit-border-bottom-right-radius : 0px;
    -webkit-border-bottom-left-radius : 4px;
}
.claro .dijitComboButton .dijitArrowButton {
    -moz-border-radius : 0px 4px 4px 0px;
    -webkit-border-top-left-radius : 0px;
    -webkit-border-top-right-radius : 4px;
    -webkit-border-bottom-right-radius : 4px;
    -webkit-border-bottom-left-radius : 0px;
}
